<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<link type="text/css" rel="stylesheet" href="themes/humanity/skin.css" />
</h:head>
<h:body style="text-align:center">
	<p:growl id="mensajes" showDetail="true" life="2000" />
	<h:form>
		<p:messages autoUpdate="true" />
		<p:panel header="XPDroid" style="width:400px">
			<h:panelGrid columns="2" cellpadding="5">
				<h:outputLabel for="Usuario" value="Usuario:" />
				<h:inputText value="#{loginRequest.username}" 
					label="Usuario">
					<f:validator validatorId="emailValidator" />
				</h:inputText>
				<h:outputLabel for="Contraseña" value="Contraseña:" />
				<p:password value="#{loginRequest.password}" 
					label="Contraseña" id="pwd" onshow="fadein" onhide="fadeout"/>
				<f:facet name="footer">
					<p:commandButton value="Iniciar sesión"
						action="#{loginRequest.login}"
						style="width: auto; height: 40px;font-size:80%; "></p:commandButton>
				</f:facet>
			</h:panelGrid>
		</p:panel>
		<p:panel style="width:400px">
				<p:commandButton value="Registrar" action="registrar" ajax="false"
					style="width: 380px; height: 40px;font-size:80%">
					</p:commandButton>
		</p:panel>
	</h:form>
	<script type="text/javascript">  
    function fadein(input, container) {  
        container.fadeIn("slow");  
    }  
  
    function fadeout(input, container) {  
        container.fadeOut("slow");  
    }  
</script> 
</h:body>
</html>
